@import '../def.scss';
.back_img{
	width: 48upx;
	height: 48upx;
	padding: 14upx 30upx 10upx 14upx;
}

.content {
	.tab{
		display: flex;
		margin: 0 auto;
		background: #FFFFFF;
		justify-content: space-between;
		width: 100%;
		padding: 50rpx 200rpx;
		box-sizing: border-box;
		
		.tab-item{
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
			line-height: 40rpx;
			position: relative;
		}
		.active{
			font-weight: 500;
			color: #000000;
			&:after{
			    content:"";
			    width: 10rpx;
			    height: 10rpx;
			    border-radius: 50%;
			    position:absolute;
			    bottom:-15rpx;
			    transform: translateX(-50%);
			    left:50%;
			    background: #000;
			}
		}
	}
	//shangping
	.tui-product-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 20rpx 20rpx 0;
		/* padding-top: 20rpx; */
		.tui-product-container {
			flex: 1;
			margin-right: 2%;
		}
		
		.tui-product-container:last-child {
			margin-right: 0;
		}
		
		.tui-pro-item {
			width: 100%;
			margin-bottom: 4%;
			background: #fff;
			box-sizing: border-box;
			border-radius: 12rpx;
			overflow: hidden;
			position: relative;
		}
		.video{
			width: 34rpx;
			height: 34rpx;
			// background: rgba(7, 7, 7, 0.2);
			border-radius: 50%;
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}
		.tui-pro-img {
			display: block;
			width: 345rpx;
		}
		
		.tui-pro-content {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			box-sizing: border-box;
			width: 345rpx;
			padding: 10rpx;
			background: #FFFFFF;
		}
		
		.tui-pro-tit {
			color: $font-color-3;
			font-size: 28rpx;
			word-break: break-all;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}
		.user-info{
			width: 100%;
			display: flex;
			align-items: center;
			margin:15rpx 0;
			image{
				width: 52rpx;
				height: 52rpx;
				border-radius: 50%;
			}
			span{
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				padding-left: 10rpx;
				max-width: 250rpx;
				@extend .nowrap;
			}
		}
		.create-time{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 30rpx;
			.time{
				font-size: 20rpx;
				font-weight: 400;
				color: #999999;
				line-height: 1;
			}
			.like{
				display: flex;
				align-items: center;
				image{
					width: 24rpx;
					height: 22rpx;
				}
				span{
					font-size: 20rpx;
					font-weight: 400;
					color: #1C1C1C;
					line-height: 1;
					padding-left: 10rpx;
				}
			}
		}
	}
}
.list{
	margin-top: 20rpx;
	.list-item{
		width: 690rpx;
		min-height: 160rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		.left{
			width: 100rpx;
			height: 100rpx;
			margin: 0 20rpx 0 0rpx;
		}
		.center{
			flex: 1;
			.head{
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #1C1C1C;
				line-height: 40rpx;
				image{
					width: 32rpx;
					height: 32rpx;
					padding-left: 20rpx;
				}
			}
			.footer{
				margin-top: 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				font-weight: 500;
				color: #1C1C1C;
				line-height: 40rpx;
				
			}
		}
		.right{
			padding: 0 20rpx;
			height: 54rpx;
			min-width: 80rpx;
			background: #1C1C1C;
			border-radius: 10rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 54rpx;
		}
	}
}
.pri-row{
	margin-bottom: 13rpx;
	.price{
		font-size: 42rpx;
		font-weight: normal;
		line-height: normal;
		text-align: center;
		color: #EC6A0A;
		.price-icon{
			font-weight: 400;
			font-size: 28rpx;
		}
	}
	.attr{
		font-size: 28rpx;
		font-weight: normal;
		line-height: 32rpx;
		text-align: center;
		color: #666666;
		margin-left: 7rpx;
	}
}
.row{
	display: flex;
	align-items: center;
	margin: 30rpx auto 10rpx;
}
.search{
	background: #F4F4F5;
	border-radius: 44rpx;
	position: relative;
	width: 560rpx;
	height: 72rpx;
	margin-left: 20rpx;
	.search-icon{
		position: absolute;
		top: 50%;
		left: 30rpx;
		transform: translateY(-50%);
		width: 42rpx;
		height: 42rpx;
	}
	input{
		width: 100%;
		height: 100%;
		line-height: 72rpx;
		font-size: 28rpx;
		padding: 0 80rpx;
		box-sizing: border-box;
	}
}
.btn{
	width: 130rpx;
	height: 65rpx;
	border-radius: 100rpx;
	background: linear-gradient(180deg, #EC6A0A 0%, #FB8E26 100%);
	font-size: 28rpx;
	font-weight: normal;
	line-height: 65rpx;
	text-align: center;
	color: #FFFFFF;
	margin-left: 10rpx;
	box-sizing: border-box;
}